<template>
  <div class="qr-use">
    <el-button type="success" class="btn" @click="use" v-show="!isShow"
      >确认</el-button
    >
    <el-result
      icon="success"
      title="使用成功"
      subTitle="请返回客户端进行查看"
      v-show="isShow && status === 'success'"
    >
    </el-result>
    <el-result
      icon="warning"
      title="警告"
      subTitle="预约已使用，请勿重复使用"
      v-show="isShow && status === 'warning'"
    >
    </el-result>
    <el-result
      icon="error"
      title="使用失败"
      subTitle="预约状态错误"
      v-show="isShow && status === 'error'"
    >
    </el-result>
  </div>
</template>

<script>
import { useHotelBooking } from "@/api/user/booking";

export default {
  name: "HotelBookingQRUse",
  props: ["id"],
  data() {
    return {
      isShow: false,
      status: "",
    };
  },
  methods: {
    // 预约使用
    async use() {
      const res = await useHotelBooking({ id: this.id });
      this.isShow = true;
      this.status = res.data;
    },
  },
};
</script>

<style lang="less" scoped>
.qr-use {
  width: 100vw;
  .btn {
    margin-top: 100px;
    width: 80vw;
  }
}
</style>